<template>
    <view :style="{ '--color': color }">
        <status-bar title="辖区店铺" :goHome="fromShare"></status-bar>
        <view class="topBg bg00 p-re">
            <view class="card thmeBg bor_radius_30 p-ab white">
                <image :src="imgUrl + 'Uploads/User_img/shadingImg.png'" mode="aspectFill" class="wh p-ab"></image>
                <view class="size26 bold padding30">{{ pageData.agent_name }}</view>
                <view class="d-flex m-bot30">
                    <view class="text-center w-333">
                        <view class="h7">
                            <text class="size36 m-right4">{{ pageData.allStoreNum }}</text>
                            个
                        </view>
                        <view>辖区店铺</view>
                    </view>
                    <view class="text-center w-333">
                        <view class="h7">
                            <text class="size36 m-right4">{{ pageData.allOrderNum }}</text>
                            单
                        </view>
                        <view>辖区总单量</view>
                    </view>
                    <view class="text-center w-333">
                        <view class="h7">
                            <text class="size36 m-right4">{{ pageData.allOrderMoney }}</text>
                            元
                        </view>
                        <view>辖区总流水</view>
                    </view>
                </view>
                <view class="d-flex j-se">
                    <view class="text-center w-333">
                        <view class="h7">
                            <text class="size36 m-right4">{{ pageData.allOrderNum }}</text>
                            单
                        </view>
                        <view>总单量</view>
                    </view>
                    <view class="text-center w-333">
                        <view class="h7">
                            <text class="size36 m-right4">{{ pageData.allOrderMoney }}</text>
                            元
                        </view>
                        <view>总流水</view>
                    </view>
                    <!-- <view class="text-center w-333" @click="toUrl('/moneyPage/capital/withdraws')">
                        <view class="h7">
                            <text class="size36 m-right4">{{ pageData.monthDispatchOrderNum }}</text>
                            元
                        </view>
                        <view class="p-re">
                            本月收益
                            <text class="iconfont icon-a-032 size40 p-ab"></text>
                        </view>
                    </view> -->
                </view>
            </view>
        </view>
        <view class="padding20 m-top50">
            <view class="d-flex p-left20 m-bot30">
                <view class="flex-1 size30 color_33 bold">辖区店铺</view>
            </view>
            <view class="item bgf8 bor_radius_6 padding20 d-flex m-bot20" v-for="(item, index) in storeList" :key="index">
                <!-- @click="toUrl('/joinPage/storeDetails?store_id=' + item.store_id + '&agent_id=' + agent_id + '&getType=3')" -->
                <image :src="$imgUrls(item.logo)" mode="aspectFill" class="bor_radius_10"></image>
                <view class="p-left20 flex-1">
                    <view class="m-bot10 row a-center">
                        <view class="flex-1 ellipsis">
                            <text class="label m-right10 d-inline-block" v-if="item.bussName">{{ item.bussName }}</text>
                            <text class="size28 color_33 bold">{{ item.name }}</text>
                        </view>
                        <text class="color_33 size26" v-if="item.is_bnt == 1 && item.is_star == 1">三星</text>
                    </view>
                    <view class="d-flex j-sb a-center m-bot10">
                        <view class="h6 color_66 flex-1 m-right10">{{ item.address }}</view>
                        <view class="size26 color_6d">{{ item.distance }}km</view>
                    </view>
                    <view class="d-flex j-sa color_66">
                        <view class="text-center">
                            <!-- <view class="size32">{{ item.other.thisMOrderNum }}</view>
                            <view class="size22">本月单量(单)</view> -->
                            <view class="size32">{{ item.other.allOrderNum }}</view>
                            <view class="size22">单量(单)</view>
                        </view>
                        <view class="text-center">
                            <!-- <view class="size32">{{ item.other.thisMOrderMoney }}</view>
                            <view class="size22">本月流水(元)</view> -->
                            <view class="size32">{{ item.other.allOrderMoney }}</view>
                            <view class="size22">流水(元)</view>
                        </view>
                        <!-- <view class="text-center">
                            <view class="size32 color_FOD">{{ item.other.thisMIncome }}</view>
                            <view class="size22">本月收益(元)</view>
                            <view class="size32 color_FOD">{{ item.other.allIncome }}</view>
                            <view class="size22">收益(元)</view>
                        </view> -->
                        <!-- <view class="text-center" v-if="item.is_bnt == 1">
                            <view class="size32 color_FOD">{{ item.v_money ? item.v_money : '0.00' }}</view>
                            <view class="size22">余额</view>
                        </view> -->
                    </view>
                </view>
            </view>

            <empty v-if="noData" cat="3" msg="您还没有相关的店铺"></empty>
            <!-- <view v-if="noData" class="btn flexac thmeBg bor_radius_10 size30 white" @click="toUrl('/joinPage/addStore')">添加店铺</view> -->
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                fromShare: 0,
                imgUrl: this.imgUrl,
                agent_id: '',
                pageData: '',
                storeList: [],
                noData: false,
                type: ''
            };
        },
        computed: {
            ...mapState(['color', 'position'])
        },
        async onLoad(e) {
            if (e.fromShare) this.fromShare = e.fromShare;
            if (e.agent_id) this.agent_id = e.agent_id;
            if (e.type) this.type = e.type;
            this.getAgent();
            if (this.position.longitude == 0) {
                await this.$pop.getLocation();
                if (this.position.longitude) this.getAgent();
            }
        },
        methods: {
            getAgent() {
                // 经纬度默认会传
                this.$http
                    .post({
                        url: '/userAgentApi/getAgentInfo',
                        data: {
                            // agent_id: this.agent_id,
                            regionAgent: 1,
                            type: this.type
                        }
                    })
                    .then((res) => {
                        this.pageData = res.agentInfo;
                        this.storeList = res.data || [];
                        if (!this.storeList.length) this.noData = true;
                    });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .topBg {
        height: 300rpx;

        .card {
            width: 690rpx;
            height: 320rpx;
            left: 30rpx;
            top: 30rpx;
            z-index: 10;

            image {
                top: 0;
                left: 0;
                z-index: -1; // 解决点击失效问题
            }

            .icon-a-032 {
                left: 20rpx;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }

    .item {
        image {
            width: 120rpx;
            height: 120rpx;
        }

        .label {
            padding: 4rpx 10rpx;
            background: #990000;
            border-radius: 10rpx;
            font-size: 22rpx;
            color: #fff;
        }
    }
    .btn {
        width: 260rpx;
        height: 80rpx;
        margin: 40rpx auto 0;
    }
</style>